<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>注册</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="images/favicon.png">

  <script src="../public/all/js/jquery-3.1.1.min.js"></script>
  <script src="../public/all/js/amazeui.min.js"></script>
  <script src="js/iscroll-lite.js"></script>
  <script src="../public/all/js/jquery.cookie.js"></script>
  <script src="js/login.min.js"></script>

  <!-- debug only -->
  <script src="js/spin.min.js"></script>
  <script src="js/loading.js"></script>
  <script src="../public/all/js/context.js"></script>
  <script src="../public/all/js/util.js"></script>
  <script src="../public/all/js/cmd.js"></script>
  <script src="../public/all/js/classify.js"></script>

  <script src="../public/all/js/me.js"></script>
  <!-- debug only end -->
  
  <link rel="stylesheet" href="../public/all/css/amazeui.min.css">
  <link rel="stylesheet" href="css/login.css">
  <link rel="stylesheet" href="css/phone.css">
  <link rel="stylesheet" href="css/register.css">
</head>
<body>
  <div class="body-bg"><img src="images/bg2.jpg"></div>

  <div id="login-top">
      注册
      <i class="am-icon-chevron-left2 back"></i>
  </div>
  <div id="login-content"><div class="for-scroll">
      <div class="register-list">
          <div class="title">为了您的资金安全，请使用真实资料！</div>
          <div class="step1">
            <div class="item referee" style="display:none">
                <div class="input"><input type="hidden" name="referee" placeholder="推荐人或上级代理" disabled></div>
                <div class="icon-left">
                    <img src="images/icon-user.png">
                </div>
            </div>
            <div class="label" style="display:none">推荐人或上级代理账号，如没有可不填写</div>

            <div class="item account">
                <div class="input"><input type="text" name="account" placeholder="账号"></div>
                <div class="icon-left">
                    <img src="images/icon-user.png">
                </div>
            </div>
            <div class="label red">* 用户名请使用6-15位英文或数字的组合</div>

            <div class="item password">
                <div class="input"><input type="password" name="p1" placeholder="密码"></div>
                <div class="icon-left">
                    <img src="images/icon-pwd.png">
                </div>
                <div class="icon-right">
                    <img src="images/icon-eye.png">
                </div>
            </div>
            <div class="label red">* 密码请使用6-20位英文或数字组合</div>

            <div class="item password">
                <div class="input"><input type="password" name="p2" placeholder="确认密码"></div>
                <div class="icon-left">
                    <img src="images/icon-pwd.png">
                </div>
                <div class="icon-right">
                    <img src="images/icon-eye.png">
                </div>
            </div>
          </div>

          <div class="step2 hide">
            <div class="item realname">
                <div class="input"><input type="text" name="realname" placeholder="真实姓名"></div>
                <div class="icon-left">
                    <img src="images/icon-user.png">
                </div>
            </div>
            <div class="label red">* 请输入真实姓名[2~5个汉字]</div>

            <div class="item p3">
                <div class="input">
                    <ul class="am-avg-sm-4">
                        <li><select class="n1" ></select></li>
                        <li><select class="n2"></select></li>
                        <li><select class="n3"></select></li>
                        <li><select class="n4"></select></li>
                    </ul>
                </div>
                <div class="icon-left take-title">
                    取款密码
                </div>
            </div>
            <div class="item qq">
                <div class="input"><input type="text" name="qq" placeholder="请输入QQ号码"></div>
                <div class="icon-left">
                    QQ
                </div>
            </div>
          </div>

          <p class="clue"></p>
          <button class="button button-block button-positive" type="submit">下一步</button>
      </div>

      <div class="login-href">已有账号？<a href="#">马上登录</a></div>
      <div style="height:200px;"></div>
  </div></div>

  <div id="loading"></div>

  <!-- 提示框 -->
  <div class="am-modal am-modal-no-btn" tabindex="-1" id="clue">
    <div class="am-modal-dialog">
        <div class="am-modal-bd" id="clue_content"></div>
    </div>
  </div>
</body>
</html>
<style type="text/css">
    .am-selected-list {
        font-size: 14px;
    }
</style>

<script>
    var currStep = 0;

    $(".button").click(function() {
        var referee = $('input[name="referee"]').val().trim();
        var account = $('input[name="account"]').val().trim();
        var p1 = $('input[name="p1"]').val().trim();
        var p2 = $('input[name="p2"]').val().trim();

        if (currStep == 0) {
            if (!account) {
                alert2("用户名不能为空");
                return;
            }
            if (! /^[0-9a-zA-Z]{6,15}$/.test(account)) {
                alert2("用户名必须为6~15位数字或字母");
                return;
            }
            if (!p1) {
                alert2("请输入登录密码");
                return;
            }
            if (p1 != p2) {
                alert2("两次密码输入不一致");
                return;
            }
            if (! /^[0-9a-zA-Z]{6,20}$/.test(p1)) {
                alert2("密码必须为6~20位数字或字母");
                return;
            }

            currStep = 1;
            $(".button").html("注册");
            $(".step1").hide();
            $(".step2").show();
        }
        else {
            
            var realname = $('input[name="realname"]').val().trim();
            var qq = $('input[name="qq"]').val().trim();
            var p3 = $("select.n1").val() + $("select.n2").val() + $("select.n3").val() + $("select.n4").val();

            if (!realname) {
                alert2("请输入真实姓名");
                return;
            }
            if (!/^[\u4E00-\u9FA5]{2,8}$/.test(realname)) {
                alert("请输入正确的真实姓名");
                return;
            }
            if (!qq) {
                alert2("请输入联系QQ号码");
                return;
            }
            if (! /^[0-9]{6,20}$/.test(qq)) {
                alert2("QQ号码不合法");
                return;
            }

            startSpin();
            urlInfo.params.try = 0;
            CMD.register(account, p1, 
                realname, '', referee, "phone", function(r) {
                CMD.modify_user_info(undefined, { tpassword: p3, qq: qq, }, function() {
                    stopSpin();
                    Util.jumpUrl({
                        file: "index.html",
                    });
                });
            }, function(message) {
                stopSpin();
                if (message.startsWith('手机号已存在')) message = "账号已存在，无法注册！";
                $("p.clue").show();
                $("p.clue").html(message);
            });
        }
    });

    $(".p3 select").selected();
    for (var i = 0; i <= 9; i++) {
        $(".p3 select").append("<option value='__i__'>__i__</option>".replace(/__i__/g, i));
    }

    if (urlInfo.params.referee) {
        $("input[name='referee']").val(urlInfo.params.referee);
    }

    $("#login-top i").click(function() {
        Util.jumpUrl({
            file: "index.html"
        });
    })
    $(".login-href a").click(function() {
        Util.jumpUrl({
            file: "login.html"
        });
    })

    $(".icon-right").click(function(e) {
        var input = $(e.currentTarget).parent().find("input");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
            $(e.currentTarget).find("img").attr("src", "images/icon-eyes.png");
        }
        else {
            input.attr("type", "password");
            $(e.currentTarget).find("img").attr("src", "images/icon-eye.png");
        }
    });

    function alert2(message) {
        $("#clue_content").html(message);
        setTimeout(function() {
            $("#clue").modal({
                width: 250
            });
        }, 10);

        // 延迟3秒关闭
        setTimeout(function() {
            $("#clue").modal("close");
        }, 1500);
    }

    var _mainScroll;
    $(function() {
        _mainScroll = new IScroll("#login-content", {
            scrollX: false,
            scrollY: true,
            click: true,
        })
    })
</script>